// 获取 DOM 元素
const postBtn = document.getElementById('postBtn');
const modalOverlay = document.getElementById('modalOverlay');
const cancelBtn = document.getElementById('cancelBtn');
const submitBtn = document.getElementById('submitBtn');

// 点击发布新帖按钮显示弹窗
postBtn.addEventListener('click', () => {
    modalOverlay.style.display = 'flex';
});

// 点击取消按钮隐藏弹窗
cancelBtn.addEventListener('click', () => {
    modalOverlay.style.display = 'none';
});

// 点击提交按钮的逻辑（这里只是简单示例，实际需根据后端接口处理）
submitBtn.addEventListener('click', () => {
    const title = document.getElementById('postTitle').value;
    const content = document.getElementById('postContent').value;

    if (title && content) {
        // 这里可以添加发送请求到后端的代码，比如用 fetch 或 axios
        console.log('帖子标题：', title);
        console.log('帖子内容：', content);
        // 提交成功后隐藏弹窗
        modalOverlay.style.display = 'none';
        // 可以添加提示发布成功的逻辑，比如弹出提示框
        alert('帖子发布成功！');
    } else {
        alert('标题和内容不能为空！');
    }
});

// 点击弹窗外部关闭弹窗
modalOverlay.addEventListener('click', (e) => {
    if (e.target === modalOverlay) {
        modalOverlay.style.display = 'none';
    }
});
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('back-to-top');

window.addEventListener('scroll', function () {
    if (window.scrollY > 100) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('shadow-sm');

        backToTop.classList.remove('opacity-0', 'invisible');
        backToTop.classList.add('opacity-100', 'visible');
    } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.add('shadow-sm');

        backToTop.classList.add('opacity-0', 'invisible');
        backToTop.classList.remove('opacity-100', 'visible');
    }
});

// 移动端菜单切换
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');

menuToggle.addEventListener('click', function () {
    mobileMenu.classList.toggle('hidden');
});

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        // 关闭移动菜单（如果打开）
        mobileMenu.classList.add('hidden');

        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);

        if (targetElement) {
            window.scrollTo({
                top: targetElement.offsetTop - 80,
                behavior: 'smooth'
            });
        }
    });
});

// 返回顶部按钮
backToTop.addEventListener('click', function () {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

// 表单提交处理
const applicationForm = document.getElementById('application-form');
const resultForm = document.getElementById('result-form');
const resultDisplay = document.getElementById('result-display');

applicationForm.addEventListener('submit', function (e) {
    e.preventDefault();
    alert('报名信息提交成功！我们会尽快审核并通知您面试时间。');
    applicationForm.reset();
});

// resultForm.addEventListener('submit', function (e) {
//     e.preventDefault();
//     // resultDisplay.classList.remove('hidden');
//     // 平滑滚动到结果展示区域
//     resultDisplay.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
// });

// 导航栏当前位置高亮
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

function highlightNavLink() {
    const scrollPosition = window.scrollY + 100;

    sections.forEach(section => {
        const sectionTop = section.offsetTop - 100;
        const sectionBottom = sectionTop + section.offsetHeight;
        const sectionId = section.getAttribute('id');

        if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
            navLinks.forEach(link => {
                link.classList.remove('text-primary');
                link.classList.add('text-dark');

                if (link.getAttribute('href') === `#${sectionId}`) {
                    link.classList.remove('text-dark');
                    link.classList.add('text-primary');
                }
            });
        }
    });
}

window.addEventListener('scroll', highlightNavLink);
highlightNavLink(); // 初始化
//前后端交互

//报名模块
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function () {
    // 获取表单元素
    const form = document.getElementById('application-form');

    // 如果表单存在，添加事件监听器
    if (form) {
        form.addEventListener('submit', handleSubmit);

        // 为必填字段添加实时验证
        const requiredInputs = form.querySelectorAll('[required]');
        requiredInputs.forEach(input => {
            input.addEventListener('blur', function () {
                validateField(this);
            });
        });
    }

    /**
     * 处理表单提交
     */
    function handleSubmit(event) {
        event.preventDefault();

        // 验证整个表单
        if (!validateForm()) {
            return;
        }

        // 收集表单数据
        const formData = collectFormData();
        console.log('表单信息', formData);

        // 提交数据到服务器
        submitFormData(formData)
            .then(response => {
                showNotification('报名成功！我们会尽快与您联系。', 'success');
                form.reset();
            })
            .catch(error => {
                showNotification(`提交失败: ${error.message}`, 'error');
            });
    }

    /**
     * 验证整个表单
     * @returns {boolean} 表单是否有效
     */
    function validateForm() {
        let isValid = true;

        // 验证所有必填字段
        const requiredFields = form.querySelectorAll('[required]');
        requiredFields.forEach(field => {
            if (!validateField(field)) {
                isValid = false;
            }
        });

        // 验证邮箱格式
        const emailField = document.getElementById('email');
        if (emailField.value && !isValidEmail(emailField.value)) {
            setFieldError(emailField, '请输入有效的邮箱地址');
            isValid = false;
        }

        // 验证手机号码
        const phoneField = document.getElementById('phone');
        if (phoneField.value && !isValidPhone(phoneField.value)) {
            setFieldError(phoneField, '请输入有效的手机号码');
            isValid = false;
        }

        // 验证高考成绩为数字
        const mathScoreField = document.getElementById('math-score');
        if (mathScoreField.value && !isNumeric(mathScoreField.value)) {
            setFieldError(mathScoreField, '请输入有效的分数');
            isValid = false;
        }

        const englishScoreField = document.getElementById('english-score');
        if (englishScoreField.value && !isNumeric(englishScoreField.value)) {
            setFieldError(englishScoreField, '请输入有效的分数');
            isValid = false;
        }

        // 验证至少选择一个意向方向
        const directionCheckboxes = document.querySelectorAll('[id^="direction-"]:checked');
        const otherDirection = document.getElementById('direction-other').value.trim();

        if (directionCheckboxes.length === 0 && !otherDirection) {
            showNotification('请至少选择一个意向方向或填写其他意向', 'error');
            isValid = false;
        }

        return isValid;
    }

    /**
     * 验证单个字段
     * @param {HTMLElement} field 表单字段
     * @returns {boolean} 字段是否有效
     */
    function validateField(field) {
        // 检查必填字段
        if (field.required && !field.value.trim()) {
            setFieldError(field, '此字段为必填项');
            return false;
        }

        // 清除错误状态
        clearFieldError(field);
        return true;
    }

    /**
     * 收集表单数据
     * @returns {Object} 表单数据对象
     */
    function collectFormData() {
        // 收集基本信息
        const formData = {
            name: document.getElementById('name').value.trim(),
            studentId: document.getElementById('student-id').value.trim(),
            major: document.getElementById('major').value.trim(),
            grade: document.getElementById('grade').value,
            mathScore: document.getElementById('math-score').value.trim(),
            englishScore: document.getElementById('english-score').value.trim(),
            expertise: document.getElementById('expertise').value.trim(),
            applicationTime: document.getElementById('application-time').value,
            projectExperience: document.getElementById('projectExperience').value.trim(),
            otherLabRegistration: document.getElementById('otherLabRegistration').value.trim(),
            futureDevelopment: document.getElementById('futureDevelopment').value.trim(),
            email: document.getElementById('email').value.trim(),
            phone: document.getElementById('phone').value.trim(),
            directions: []
        };

        // 收集意向方向
        const directionCheckboxes = document.querySelectorAll('[id^="direction-"]:checked');
        directionCheckboxes.forEach(checkbox => {
            formData.directions.push(checkbox.nextElementSibling.textContent);
        });

        // 收集其他意向
        const otherDirection = document.getElementById('direction-other').value.trim();
        if (otherDirection) {
            formData.directions.push(`其他: ${otherDirection}`);
        }

        return formData;
    }

    /**
     * 提交表单数据到服务器
     * @param {Object} data 表单数据
     * @returns {Promise} 提交结果的Promise
     */
    function submitFormData(data) {
        // 替换为您的后端API地址
        const apiUrl = '/api/application';

        return fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 如果需要身份验证，可以添加Authorization头
                // 'Authorization': 'Bearer ' + getAuthToken()
            },
            body: JSON.stringify(data),
        })
            .then(response => {
                // 解析响应
                return response.json().then(responseData => {
                    // 检查HTTP状态码
                    if (!response.ok) {
                        throw new Error(responseData.message || `请求失败 (${response.status})`);
                    }

                    // 检查业务逻辑状态
                    if (responseData.success === false) {
                        throw new Error(responseData.message || '提交失败，请稍后再试');
                    }

                    return responseData;
                });
            })
            .catch(error => {
                console.error('提交表单时出错:', error);
                throw error;
            });
    }

    /**
     * 显示通知消息
     * @param {string} message 消息内容
     * @param {string} type 消息类型：success, error, info
     */
    function showNotification(message, type = 'info') {
        // 创建通知元素
        let notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-[-100px] opacity-0`;

        // 设置样式
        if (type === 'success') {
            notification.classList.add('bg-green-50', 'text-green-800', 'border', 'border-green-200');
        } else if (type === 'error') {
            notification.classList.add('bg-red-50', 'text-red-800', 'border', 'border-red-200');
        } else {
            notification.classList.add('bg-blue-50', 'text-blue-800', 'border', 'border-blue-200');
        }

        // 设置消息内容
        notification.textContent = message;
        document.body.appendChild(notification);

        // 显示通知
        setTimeout(() => {
            notification.classList.remove('translate-y-[-100px]', 'opacity-0');
        }, 10);

        // 3秒后隐藏通知
        setTimeout(() => {
            notification.classList.add('translate-y-[-100px]', 'opacity-0');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    /**
     * 设置字段错误状态
     * @param {HTMLElement} field 表单字段
     * @param {string} message 错误消息
     */
    function setFieldError(field, message) {
        // 添加错误样式
        field.classList.add('border-red-500');
        field.classList.remove('border-gray-300', 'border-green-500');

        // 查找或创建错误消息元素
        let errorElement = field.parentNode.querySelector('.error-message');
        if (!errorElement) {
            errorElement = document.createElement('p');
            errorElement.className = 'error-message text-red-500 text-sm mt-1';
            field.parentNode.appendChild(errorElement);
        }

        // 设置错误消息
        errorElement.textContent = message;
    }

    /**
     * 清除字段错误状态
     * @param {HTMLElement} field 表单字段
     */
    function clearFieldError(field) {
        // 移除错误样式，添加成功样式
        field.classList.remove('border-red-500');
        field.classList.add('border-green-500');

        // 移除错误消息
        const errorElement = field.parentNode.querySelector('.error-message');
        if (errorElement) {
            errorElement.remove();
        }
    }

    /**
     * 验证邮箱格式
     * @param {string} email 邮箱地址
     * @returns {boolean} 是否为有效邮箱
     */
    function isValidEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    /**
     * 验证手机号码格式
     * @param {string} phone 手机号码
     * @returns {boolean} 是否为有效手机号码
     */
    function isValidPhone(phone) {
        const re = /^1[3-9]\d{9}$/;
        return re.test(phone);
    }

    /**
     * 检查是否为数字
     * @param {string} value 要检查的值
     * @returns {boolean} 是否为数字
     */
    function isNumeric(value) {
        return /^\d+$/.test(value);
    }
});


//查询功能
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function () {
    // 获取表单元素
    const form = document.getElementById('result-form');

    // 如果表单存在，添加提交事件监听器
    if (form) {
        form.addEventListener('submit', handleFormSubmit);

        // 为输入字段添加实时验证
        const inputFields = form.querySelectorAll('input[required]');
        inputFields.forEach(field => {
            field.addEventListener('blur', function () {
                validateField(this);
            });
        });
    }

    /**
     * 处理表单提交
     */
    function handleFormSubmit(event) {
        // 阻止表单默认提交行为
        event.preventDefault();

        // 验证表单
        if (!validateForm()) {
            return;
        }

        // 获取学号（只需上传学号给后端）
        const studentId = document.getElementById('query-id').value.trim();

        // 提交查询请求
        queryResult(studentId)
            .then(result => {
                // 显示查询结果
                displayResult(result);
            })
            .catch(error => {
                // 显示错误信息
                showNotification(`查询失败: ${error.message}`, 'error');
            });
    }

    /**
     * 验证整个表单
     * @returns {boolean} 表单是否有效
     */
    function validateForm() {
        let isValid = true;

        // 验证姓名
        const nameField = document.getElementById('query-name');
        if (!nameField.value.trim()) {
            setFieldError(nameField, '请输入您的姓名');
            isValid = false;
        } else {
            clearFieldError(nameField);
        }

        // 验证学号
        const idField = document.getElementById('query-id');
        if (!idField.value.trim()) {
            setFieldError(idField, '请输入您的学号');
            isValid = false;
        } else {
            clearFieldError(idField);
        }

        // 验证手机号码
        const phoneField = document.getElementById('query-phone');
        if (!phoneField.value.trim()) {
            setFieldError(phoneField, '请输入您的手机号码');
            isValid = false;
        } else if (!isValidPhone(phoneField.value)) {
            setFieldError(phoneField, '请输入有效的手机号码');
            isValid = false;
        } else {
            clearFieldError(phoneField);
        }

        return isValid;
    }

    /**
     * 验证单个字段
     * @param {HTMLElement} field 表单字段
     * @returns {boolean} 字段是否有效
     */
    function validateField(field) {
        if (!field.value.trim()) {
            setFieldError(field, `请输入${getFieldLabel(field)}`);
            return false;
        }

        // 特殊验证：手机号码
        if (field.id === 'query-phone' && !isValidPhone(field.value)) {
            setFieldError(field, '请输入有效的手机号码');
            return false;
        }

        clearFieldError(field);
        return true;
    }

    /**
     * 获取字段的标签文本
     * @param {HTMLElement} field 表单字段
     * @returns {string} 标签文本
     */
    function getFieldLabel(field) {
        const label = field.parentNode.querySelector('label');
        return label ? label.textContent.replace(' *', '').trim() : '';
    }

    /**
     * 提交查询请求到后端
     * @param {string} studentId 学号
     * @returns {Promise} 包含查询结果的Promise
     */
    function queryResult(studentId) {
        // 后端API地址，根据实际情况修改
        const apiUrl = 'http://192.168.72.90:8000/interview/list/';
        return fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 如有需要，添加认证信息
                // 'Authorization': 'Bearer ' + getAuthToken()
            },
            body: JSON.stringify({ studentId: studentId }), // 只上传学号
            credentials: 'include' // 包含cookie，处理会话
        })
            .then(response => {
                // 解析响应
                return response.json().then(data => {
                    // 检查HTTP状态
                    if (!response.ok) {
                        throw new Error(data.message || `请求失败 (状态码: ${response.status})`);
                    }

                    // 检查业务逻辑状态
                    if (data.success === false) {
                        throw new Error(data.message || '查询失败，请稍后再试');
                    }

                    return data;
                });
            })
            .catch(error => {
                console.error('查询结果时出错:', error);
                throw error;
            });
    }

    /**
     * 显示查询结果
     * @param {Object} result 后端返回的结果数据
     */
    function displayResult(result) {
        // 创建结果显示区域（如果不存在）
        let resultContainer = document.querySelector('.result-container');
        if (!resultContainer) {
            resultContainer = document.createElement('div');
            resultContainer.className = 'result-container mt-6 p-4 rounded-lg border transition-all duration-300';
            form.parentNode.appendChild(resultContainer);
        }

        // 根据结果设置样式和内容
        if (result.passed) {
            // 通过
            resultContainer.className = 'result-container mt-6 p-4 rounded-lg border border-green-200 bg-green-50 text-green-800 transition-all duration-300';
            resultContainer.innerHTML = `
                <h3 class="font-bold text-lg mb-2">恭喜您通过面试！</h3>
                <p>${result.message || '您已成功加入互联网实验室，请等待后续通知。'}</p>
                ${result.details ? `<p class="mt-2">${result.details}</p>` : ''}
            `;
        } else if (result.passed === false) {
            // 未通过
            resultContainer.className = 'result-container mt-6 p-4 rounded-lg border border-orange-200 bg-orange-50 text-orange-800 transition-all duration-300';
            resultContainer.innerHTML = `
                <h3 class="font-bold text-lg mb-2">很遗憾未通过面试</h3>
                <p>${result.message || '感谢您的申请，希望未来有机会合作。'}</p>
            `;
        } else {
            // 结果未出或未找到
            resultContainer.className = 'result-container mt-6 p-4 rounded-lg border border-blue-200 bg-blue-50 text-blue-800 transition-all duration-300';
            resultContainer.innerHTML = `
                <h3 class="font-bold text-lg mb-2">查询结果</h3>
                <p>${result.message || '暂未查询到您的面试结果，请稍后再试。'}</p>
            `;
        }

        // 显示通知
        showNotification('查询成功', 'success');
    }

    /**
     * 显示通知消息
     * @param {string} message 消息内容
     * @param {string} type 消息类型：success, error, info
     */
    function showNotification(message, type = 'info') {
        // 创建通知元素
        let notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-[-100px] opacity-0`;

        // 设置样式
        if (type === 'success') {
            notification.classList.add('bg-green-50', 'text-green-800', 'border', 'border-green-200');
        } else if (type === 'error') {
            notification.classList.add('bg-red-50', 'text-red-800', 'border', 'border-red-200');
        } else {
            notification.classList.add('bg-blue-50', 'text-blue-800', 'border', 'border-blue-200');
        }

        // 设置消息内容
        notification.textContent = message;
        document.body.appendChild(notification);

        // 显示通知
        setTimeout(() => {
            notification.classList.remove('translate-y-[-100px]', 'opacity-0');
        }, 10);

        // 3秒后隐藏通知
        setTimeout(() => {
            notification.classList.add('translate-y-[-100px]', 'opacity-0');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    /**
     * 设置字段错误状态
     * @param {HTMLElement} field 表单字段
     * @param {string} message 错误消息
     */
    function setFieldError(field, message) {
        field.classList.add('border-red-500');
        field.classList.remove('border-gray-300', 'border-green-500');

        let errorElement = field.parentNode.querySelector('.error-message');
        if (!errorElement) {
            errorElement = document.createElement('p');
            errorElement.className = 'error-message text-red-500 text-sm mt-1';
            field.parentNode.appendChild(errorElement);
        }

        errorElement.textContent = message;
    }

    /**
     * 清除字段错误状态
     * @param {HTMLElement} field 表单字段
     */
    function clearFieldError(field) {
        field.classList.remove('border-red-500');
        field.classList.add('border-green-500');

        const errorElement = field.parentNode.querySelector('.error-message');
        if (errorElement) {
            errorElement.remove();
        }
    }

    /**
     * 验证手机号码格式
     * @param {string} phone 手机号码
     * @returns {boolean} 是否为有效手机号码
     */
    function isValidPhone(phone) {
        const re = /^1[3-9]\d{9}$/;
        return re.test(phone);
    }
});

